<template>
  <div id="product-classify-page"  :style="{paddingTop:(this.getSafeArea().top+42-4)+'px',height:(this.getWinSize().height-44-this.getSafeArea().top)+'px'}">
    <div class="search-top-bar" @click="$router.push('/SearchAct')" :style="{top:(this.getSafeArea().top)+'px'}">
<!--      <i class="icon el-icon-arrow-left" @click="$router.back()"></i>-->
      <el-input class="keyword-input" placeholder="请输入您要搜索的关键词"  @keyup.enter.native="getList"></el-input>
      <button class="search-button">搜索</button>
      <div class="c"></div>
    </div>

    <div class="product-classify-box">
      <div class="left-menu">
        <div class="item" v-for="(item,index) in systemClassifyName" :key="index" v-text="item.name" :class="{curr:item.name===classifyName_1}" @click="chooseClassifyName_1(item.name)"></div>
        <div class="c"></div>
      </div>


      <div class="right-box">
        <div class="item" v-for="(item,index) in classifyName_2_Arr" :key="index">
          <div class="title">
            <span v-text="item.name"></span>
          </div>
          <div class="list-item">
            <div class="item" v-for="(_item,_index) in item.subList" :key="_index" v-text="_item.name" :class="{curr:_item.name===currClassifyName}" @click="choose(_item.name)">三级分类1</div>
            <div class="c"></div>
          </div>
          <div class="c"></div>
        </div>
      </div>

      <div class="c"></div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductClassify',
  data:function () {
    return {
      systemClassifyName:dict.SystemClassifyName,
      classifyName_2_Arr:[],
      classifyName_1:'',
      currClassifyName:''
    }
  },
  mounted () {
    this.classifyName_1=this.systemClassifyName[0].name
    this.initClassifyArr_2()
    // this.myQrAct('{"act":"shopProductPurchase","orderNo":"202208120044253440"}')
  },
  methods:{
    chooseClassifyName_1:function (classifyName_1) {
      this.classifyName_1=classifyName_1
      this.initClassifyArr_2()
    },
    // 联动计算: 1级分类名称,对应下级数组
    initClassifyArr_2:function () {
      let $this=this
      $this.systemClassifyName.forEach(function (value, index) {
        if (value.name===$this.classifyName_1){
          $this.classifyName_2_Arr=value.subList;
        }
      })
      $this.$forceUpdate()
    },
    // 选择3级分类
    choose: function (name) {
      this.$router.push({
        name:'SearchResult',
        query:{
          classifyName:name
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
